form {
    margin-top: 30px;
}

input[type=email], input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

textarea {
    padding: 12px 20px !important;
    margin: 8px 0 !important;
    display: inline-block !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    font-family: 'Open Sans', Helevetica, Arial, sans-serif !important;
}

button[type=submit] {
    background-color: #222222;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    cursor: pointer;
    width: 100%;
    border: 1px solid #222222;
}
button[type=submit]:hover {
    background-color: #0d0d0d;
    color: white;
}

.tm-btn-link {
    color: #222222;
    text-decoration: none;
    font-size: 13px;
}
.tm-btn-link:hover {
    color: #0d0d0d;
}
.tm-btn-link-center {
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 520px) {
    textarea{
        width:100% !important;
    }
}

@media (max-width: 943px) {
    textarea{
        width:450px !important;
    }
}

@media (max-width: 910px) {
    textarea{
        width:400px !important;
    }
}

@media (max-width: 856px) {
    textarea{
        width:350px !important;
    }
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #222222;
    color: #fff;
    text-align: left;
    font-size: 12px;
    padding: 5px 5px;
    border: solid #0d0d0d;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#message {
    display:none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
}

.validation-password {
    padding-bottom: 10px;
    display: none;
}

.validation-password p {
    padding: 0 35px;
    font-size: 11px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -35px;
    content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
}